<!--
 * @Author: Mr.Li
 * @Date: 6/9/2025 14:25
 * @Description: index
-->
<template>
  <div class="d-f">
    <div>
      <TreeEditor :isbtnshow="false" @click-node="handleNodeClick" />
    </div>
    <div class="container">
      <TableSearch
        :query="queryData"
        :options="searchOpt"
        :search="handleSearch"
        @refresh="refreshSearch"
      />
      <TableCustom
        :columns="columns"
        :tableData="fileList"
        :total="page.total"
        :currentPage="queryData.pageNum"
        :highlightCurrentRow="true"
        :delFunc="handleDelete"
        :page-change="changePage"
        @refresh="refresh"
        @row-click="rowClick"
        @changePage="changePage"
        :editFunc="handleEdit"
      >
      </TableCustom>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import TableCustom from "@/components/table-custom.vue";
import IconDocx from "@/assets/icon_docx.svg";
import IconPdf from "@/assets/icon_pdf.svg";
import IconPptx from "@/assets/icon_pptx.svg";
import iconXlsx from "@/assets/icon_xlsx.svg";
import { documentinfopage, documentInfoRemove } from "@/api/office";
import { FormOption, FormOptionList } from "@/types/form-option";
import TableSearch from "@/components/table-search.vue";
import TreeEditor from "@/components/tree/treeEditor.vue";

import router from "@/router";

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "changePage", event: any): void;
  (e: "refresh"): void;
  (e: "row-click", value: string): void;
}>();

let columns = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "documentId", label: "模板ID", showOverflowTooltip: true },
  { prop: "documentName", label: "模板名称", showOverflowTooltip: true },
]);

// 查询相关
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "模板名称", prop: "documentName" },
]);
const handleSearch = (e) => {
  changeTable();
};

//当前行被点击
const rowClick = (row) => {
  emit("row-click", row);
};

const page = reactive({
  index: 1,
  size: 10,
  total: 0,
});

const fileList = ref([]);
const fileRef = ref();
const uploadLoading = ref(false);
const iconMap = {
  DOC: IconDocx,
  xlsx: iconXlsx,
  pptx: IconPptx,
  pdf: IconPdf,
};

const queryData = ref({
  pageNum: 1,
  pageSize: 10,
  orderBy: "createTime",
  conditions: [
    {
      column: "documentName",
      type: "like",
      value: "",
    },
    {
      column: "type",
      type: "like",
      value: "1201",
    },
  ],
  asc: false,
});

//弹窗
const showFormDialog = ref(false);
const linkResources = async () => {
  showFormDialog.value = true;
};
const handleBeforeClose = (done) => {};

const changePage = (val: number) => {
  console.log("val", val);

  queryData.value.pageNum = val;
  init();
};

const changeTable = () => {
  console.log("queryData", queryData);
  init();
};

const refresh = () => {
  init();
};

//点击项目
const handleNodeClick = (id) => {
  console.log("id", id);

  queryData.value.conditions[2] = {
    column: "projectId",
    type: "eq",
    value: id,
  };
  init();
};

const refreshSearch = () => {
  queryData.value = {
    pageNum: 1,
    pageSize: 10,
    orderBy: "createTime",
    conditions: [
      {
        column: "documentName",
        type: "like",
        value: "",
      },
      {
        column: "type",
        type: "like",
        value: "1201",
      },
    ],
    asc: false,
  };
  init();
};

const init = async () => {
  const data: any = await documentinfopage(queryData.value);
  // fileList.value = [
  //   {
  //     documentId: "1f278943-6586-4795-8f46-ca9a39f60ea7",
  //     documentName: "测试文件",
  //     path: "http://14.103.103.128:9090/db-report/5a4edd99-63f5-4400-9359-b3de51e90807.docx",
  //   },
  // ];
  fileList.value = data.records;
  page.total = data.total;
};

init();
function handleEdit(row) {
  //   window.open(`/#/office?fileUrl=${encodeURIComponent(row.fileUrl)}&mode=EDIT`)
  router.push({
    name: "template-edit",
    query: {
      // fileUrl: encodeURIComponent(row.fileUrl),
      fileUrl: row.path,
      id: row.documentId,
      mode: "edit",
    },
  });
}

// 删除相关
const handleDelete = async (row: any) => {
  await documentInfoRemove([row.documentId]);
  ElMessage.success("删除成功");
  init();
};

const submitForm = () => {
  showFormDialog.value = false;
};
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  margin-left: 20px;

  flex: 1;
}

.filename {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
</style>
